<template>
  <div id="customCubeBox"></div>
</template>

<script>
import InitCesium from "@/lib/initCesium.js";
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";

export default {
  data() {
    return {
      viewerObj: null,
    };
  },
  mounted() {
    this.init();
  },
  unmounted() {
    this.viewerObj.destroy();
  },
  methods: {
    init() {
      this.viewerObj = InitCesium.init("customCubeBox");

      this.viewerObj.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          125.523256,
          42.703033,
          120000.0
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0),
          pitch: Cesium.Math.toRadians(-45),
          roll: 0.0,
        },
        duration: 2,
      });

      this.addCube();
    },
    addCube() {
      const extrudedPolygon = new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray([
            124.823256, 43.363033, 125.823256, 43.363033, 125.823256, 44.363033,
            124.823256, 44.363033,
          ])
        ),
        extrudedHeight: 20000,
      });
      const instance = new Cesium.GeometryInstance({
        geometry: extrudedPolygon,
        id: "box with height",
      });
      // 创建材质，在MaterialAppearance中若不添加基础材质，模型将会透明
      var material = new Cesium.Material.fromType("Color");
      material.uniforms.color = Cesium.Color.WHITE;
      // 自定义材质
      const aper = new Cesium.MaterialAppearance({
        material: material,
        translucent: true,
        closed: true,
        vertexShaderSource: `
                        attribute vec3 position3DHigh;
                        attribute vec3 position3DLow;
                        attribute vec3 normal;
                        attribute vec2 st;
                        attribute float batchId;
                        varying vec3 vNormal;
                        void main() {
                            //将attributes的normal通过varying赋值给了向量vNormal
                            vNormal = normal;
                            //projectionMatrix是投影变换矩阵 modelViewMatrix是相机坐标系的变换矩阵
                            vec4 p = czm_computePosition();
                            gl_Position = czm_modelViewProjectionRelativeToEye * p;
                        }
                    `,
        fragmentShaderSource: `         
                        //片元着色器同样需要定义varying vec3 vNormal；
                        varying vec3 vNormal;
                        void main() {
                        //vNormal是一个已经归一化的三维向量
                            float pr = (vNormal.x + 1.0) / 2.0; //pr红色通道值范围为0~1
                            float pg = (vNormal.y + 1.0) / 2.0; //pg绿色通道值范围为0~1
                            float pb = (vNormal.z + 1.0) / 2.0; //pb蓝色通道值范围为0~1
                            gl_FragColor=vec4(pr, pg, pb, 1.0); //最后设置顶点颜色，点与点之间会自动插值
                        }
                `,
      });
      // 加载模型
      this.viewerObj.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: [instance],
          appearance: aper,
          releaseGeometryInstances: false,
          compressVertices: false,
        })
      );
    },
  },
};
</script>

<style>
#customCubeBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
